<!--
 * @Descripttion: 历史订单详情
 * @Author: maybe
 * @Date: 2019-06-27 15:20:10
 -->

<template>
    <div class="orderDetail" style="height:100%;">
        <el-container>
            <el-header class="padding-0">
               <span >历史订单</span>
               <i class="el-icon-circle-close pull-right"  style="margin-top: 28px;margin-right: 100px;font-size:26px;" @click="goTranscation()"></i>              
            </el-header>
            
            <el-main class="padding-0" style="height:100%;">
                <el-container style="height:100%">
                    <el-aside class="aside" width="260px">
                        <div class="type">
                            选择年限 <i class="el-icon-arrow-up"></i> &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
                            货币类型 <i class="el-icon-arrow-up"></i>
                        </div>
                        <div class="content">
                            <div class="order-type-list">
                               <div v-for="(item,index) in  orderList" :key="index">
                                    <div style="line-height: 63px;font-size: 16px;">
                                        <i class="icon-circle hide"></i> {{formatDate(item.stockDate)}} <i class="el-icon-arrow-right pull-right hand" @click="getData(item.tradeId,item.transactionType)" style="margin-top:22px;"></i>
                                    </div> 
                                    <div style="line-height: 30px;font-size: 14px;" >
                                        <span class="title">{{item.investProductName}}</span>
                                        <span class="pull-right">{{item.investAmount | monely}}</span>
                                    </div> 
                                    <div  style="line-height: 30px;font-size: 14px;">
                                       <span class="font-green">{{item.earnings}}</span>
                                        <span class="pull-right font-red">{{item.percent}}</span>
                                    </div>
                                </div>
                                

                               

                            </div>
                        </div>

                    </el-aside>

                    
                    <el-main class=" main padding-top-0 text-center">
                        <div class="order-list-detail text-left">
                            <!-- <h3>BTC/USD</h3>
                            <el-row type="flex" class="row-bg margin-top-40" justify="space-around">
                                <el-col :span="6">
                                    <div class="text-center">
                                        <span  class="all">总收益</span>
                                        <p class="font-green">{{getArr().totalInvestment | monely}}</p>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                     <div class="text-center">
                                        <span class="all">总百分比</span>
                                        <p class="font-green">{{getArr().totalPercentage}}</p>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="text-center">
                                        <span  class="all">总投资</span>
                                        <p class="font-green">{{getArr().totalRevenue | monely}}</p>
                                    </div>
                                </el-col>
                            </el-row> -->

                          <div class="content clearfix">
                                <div class="item-list">
                                    <div class="clearfix"></div>
                                    <div class="title"> <span class="font-gray">订单</span> <span>{{dataObj.tradeId}}</span> </div>
                                    <div class="item-detail clearfix" style="overflew:hidden">   
                                        <div class="padding-0-20"><span class="font-gray">B/S</span>  <span class="pull-right font-green"> <i class="icon" :class="dataObj.tradeType == 'BUYOR'? 'icon-bg-red':'icon-bg-green' "></i> {{dataObj.tradeType}}</span></div>
                                        <div class="padding-0-20 border-1"><span class="font-gray">收益</span>  <span class="pull-right" :class="dataObj.earnings > 0 ? 'font-green':'font-red'"> {{dataObj.earnings}}</span></div>
                                        <div class="padding-0-20 border-1"><span class="font-gray">百分比</span>  <span class="pull-right font-green" > {{dataObj.percent}}</span></div>
                                        <div class="padding-0-20 border-1"><span class="font-gray">投资</span>  <span class="pull-right font-red">  {{dataObj.investAmount}}</span></div>
                                        <div class="padding-0-20 border-1"><span class="font-gray">成交价格</span>  <span class="pull-right font-white">  {{dataObj.openingPrice}}</span></div>
                                         <div class="padding-0-20 border-1"><span class="font-gray">平仓价格</span>  <span class="pull-right font-white">  {{dataObj.closingPrice}}</span></div>
                                        <div class="padding-0-20 border-1"><span class="font-gray">成交时间</span>  <span class="pull-right font-white"> {{dataObj.createTime}}</span></div>
                                        <div class="padding-0-20 border-1"><span class="font-gray">结算时间</span>  <span class="pull-right font-white">  {{dataObj.stockDate}}</span></div>
                                    </div>
                                </div>                               
                            </div>
                        </div>
                    </el-main>


                 
                

                </el-container>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import {mapState} from 'vuex'
import {getOneOrder,getAllHistoryOrder} from '@/ajax/index'
import {formatDate} from '@/assets/js/rule'
export default {
    name:"OrderDetail",
    data () {
        return {
            msg: '没有什么事比写代码更让人快乐,如果有那就是发工资',
            list:'',
            tradeId:'',
            transactionType:'',
            accountType:'',
            orderList:[],
            dataObj:{}
        }
    },
    mounted(){
        this.tradeId = this.$route.query.id;
        this.transactionType = this.$route.query.transactionType;
        this.accountType = this.$route.query.accountType;
        this.getOrderList();
        this.getData();
    },
    methods:{
        formatDate,
        async getData(tradeId,transactionType) {
           const param = {
              'tradeId':tradeId?tradeId:this.tradeId,
              'transactionType':transactionType?transactionType:this.transactionType,
              'accountType':this.accountType
           }
            let result = await getOneOrder(param)
            if(result.code === '200' && result.data.state === '1'){
                    this.dataObj = result.data.data;
              }else{
                    this.$message({
                        message:result.data.message,
                        type: 'error',
                        duration:2000,               
                    });
              }
        },
        async getOrderList(){
            const param = {
                'customerId':'598240017348820992' || this.$store.state.userId,
                'accountType': this.accountType,  //账户类U型
                'productName':'',
                'pageNum':1,
                'pageSize':10
            }
            let result = await getAllHistoryOrder(param)
            if(result.code === '200' && result.data.state === '1'){ 
                this.orderList = result.data.data
            }else{
                this.$alert(result.data.message,'富易');
            }
        },
        goTranscation(){
            this.$router.push({path:'index'})
        }
    }
   
}
</script>

<style lang="less" scoped>
    .orderDetail{
        // header
        height: 100%;
        padding: 0 60px;
        border-top: 1px solid #1a1b37;
        .padding-0-20{padding: 0 20px;}
        .el-container.is-vertical{height: 100%;}
        .el-header{
            span{font-size:26px;color:#fff;line-height:60px;}
            i{font-size:21px;}
        }
        .aside{
            .type{ font-size: 14px;color: #72739c;}
            .content{
                .icon-cricle{display: inline-block; width: 6px;height: 6px;border-radius: 50%;background-color: #29a8d1;vertical-align: 3px;}
                
            }
        }
        .main{
            .order-list-detail{
                // margin-left:120px;
                display: inline-block;
                width: 800px;
                height: 600px;              
                .all{
                    font-size: 18px;
                    color: #72739c;
                    line-height: 40px;
                }
            }
            .margin-20{margin:0 20px;}
            .border-1{border-top:1px solid #2e3052;}
            .el-col-11{line-height: 60px;font-size: 16px;}
            .font-white{color: #fff!important;}
            // .icon{display: inline-block;width: 16px;height: 16px;background: url('./img/spirit.png') no-repeat;}
            // .icon-bg-red{background-position: -29px -1199px;}
            // .icon-bg-green{background-position: -28px -1240px;}
        }
        .content .item-list{
                width: 600px;
                padding: 0 20px;     
                margin: 40px auto;
                box-sizing: border-box;
                box-sizing: border-box;
                padding: 0 20px;
                .item-detail{ margin-top:10px; background-color: rgba(117, 119, 173, 0.2);border-radius: 8px;line-height: 40px;}
                .font-white{color: #fff!important;}
                .icon{display: inline-block;width: 16px;height: 16px;background: url('./img/spirit.png') no-repeat;}
                .icon-bg-red{background-position: -29px -1199px;}
                .icon-bg-green{background-position: -28px -1240px;}
        }

    }
</style>

